<template>
  <el-dialog
    title="修改角色"
    v-bind="$attrs"
    v-on="$listeners"
    @open="defaultRoles"
  >
    <el-form label-width="80px" size="normal" ref="rolesModifyForm"
    :model="roles"
    :rules="rules"
    >
      <el-form-item label="角色名称" prop="roleName">
        <el-input v-model="roles.roleName"></el-input>
      </el-form-item>
      <el-form-item label="角色描述" prop="roleDesc">
        <el-input v-model="roles.roleDesc"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <span>
        <el-button @click="$emit('update:visible', false)">取 消</el-button>
        <el-button type="primary" @click="modifyRoles()">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>


<script>
export default {
  props: {
    chooseRoleForm: {
      type: Object,
      default: function(){
        return {}
      },
    },
  },
  data() {
    return {
      roles: {
        id:null,
        roleName: "",
        roleDesc: "",
      },
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
        ],
        roleDesc: [
          { required: true, message: "请输入角色描述", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    async modifyRoles() {
      await this.$refs.rolesModifyForm.validate();
      let result = await this.$api.modifyRoles(this.roles.id,this.roles);
      console.log(result);
      if (result == "error") return;
      this.$message.success("角色修改成功");
      this.$parent.initRolesList();
      this.$emit("update:visible", false);
    },
    defaultRoles() {
      this.roles.id = this.chooseRoleForm.id;
      this.roles.roleName = this.chooseRoleForm.roleName;
      this.roles.roleDesc = this.chooseRoleForm.roleDesc;
    },
  },
};
</script>